<template>
	<view class="header">
		<view class="top">
			<view>
				<image src="/static/gongchang.png"></image>
			</view>
			<view><text>大美汽修厂，欢迎您</text></view>
		</view>
		<uni-card>
			<view class="card1">
				<view>
					<image src="/static/saom.png"></image>
					<view>扫码核销</view>
				</view>
				<view>
					<image src="/static/shur.png"></image>
					<view>输入核销码</view>
				</view>
			</view>
		</uni-card>
		<uni-card>
			<view class="card2">
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>经营统计</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>核销记录</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>收支明细</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<!-- 					<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
						<view>订单管理</view>
					</uni-badge> -->
					<uni-badge class="uni-badge-left-margin" :text="12" absolute="rightTop" size="small">
						<view>订单管理</view>
					</uni-badge>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>卡券管理</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>维修任务</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<uni-badge class="uni-badge-left-margin" :text="12" absolute="rightTop" size="small">
						<view>评价管理</view>
					</uni-badge>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>商户资料</view>
				</view>
				<view>
					<view>
						<image src="/static/huod.png"></image>
					</view>
					<view>活动发布</view>
				</view>

			</view>
		</uni-card>
		<uni-card>
			<view style="display: flex;justify-content: space-between;margin-bottom: 40rpx;">
				<view>
					<image style="width: 40rpx;height: 40rpx;" src="/static/xiaox.png"></image>
					<text class="title">最新通知</text>
				</view>
				<view>
					<text style="font-size: 25rpx;color: #ff9578;">今日需上门取车任务共32单</text>
					<image style="width: 20rpx;height: 20rpx;" src="/static/jiant.png"></image>
				</view>
			</view>

			
				<view class="user-section">
					<view class="service-header">
						<text class="section-title">用户</text>
						<text class="service-title">服务项目</text>
						<text class="time-title">时间</text>
					</view>
				</view>

				<!-- 通知列表 -->
				<view class="notice-item" v-for="(item, index) in notices" :key="index">
					
					<view class="service-info">
						<text class="user-name">{{ item.userName }}</text>
						<text class="service-content">{{ item.service }}</text>
						<text class="service-time">{{ item.time }}</text>
					</view>
				</view>

		</uni-card>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
// 模拟通知数据
const notices = ref([
  {
    userName: '张先生',
    service: '汽车美容、基础保养',
    time: '2022-03-10 11:09'
  },
  {
    userName: '张先生',
    service: '汽车精细',
    time: '2022-03-10 11:09'
  },
  {
    userName: '张先生',
    service: '车辆维修-上门取车',
    time: '2022-03-10 11:09'
  },
  {
    userName: '张先生',
    service: '汽车美容、基础保养',
    time: '2022-03-10 11:09'
  },
  {
    userName: '张先生',
    service: '车辆维修-到店维修',
    time: '2022-03-10 11:09'
  }
]);
</script>

<style>
	.header {
		background-image: url(@/static/lbgt.png);
		height: 30vh;
		padding: 10rpx;
	}

	.top {
		display: flex;
	}

	.top image {
		margin: 30rpx 20rpx 0 60rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.top text {
		color: white;
		line-height: 200rpx;
	}

	.card1 {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		text-align: center;
		padding: 20rpx 0;
	}

	.card1 image {
		width: 100rpx;
		height: 100rpx;
	}

	.card2 {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		text-align: center;
	}

	.card2 image {
		width: 120rpx;
		height: 120rpx;
		background-color: #ff8940;
		border-radius: 30rpx;
	}

	.card2>view {
		padding: 13rpx;
		border-radius: 30rpx;
	}
/* 	.header {
	  margin-bottom: 20px;
	} */
	
	.title {
	  font-size: 40rpx;
	  font-weight: 500rpx;
	  color: #333;
	}
	
	.notice-list {
	  background-color: #fff;
	  border-radius: 8px;
	  padding: 15px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}
	
	.user-section {
	  margin-bottom: 15px;
	  border-bottom: 1px solid #eee;
	  padding-bottom: 10px;
	}
	
	.section-title {
	  font-size: 30rpx;
	  /* font-weight: bold; */
	  color: #333;
	}
	
	.service-header {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 10px;
	}
	
	.service-title, .time-title {
	  font-size: 30rpx;
	  color: #666;
	}
	
	.notice-item {
	  padding: 12px 0;
	  border-bottom: 1px solid #f0f0f0;
	}
	
	.user-name {
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #333;
	  margin-bottom: 5px;
	  display: block;
	}
	
	.service-info {
		text-align: center;
	  display: flex;
	  justify-content: space-between;
	}
	
	.service-content {
	  font-size: 14px;
	  color: #666;
	  flex: 1;
	}
	
	.service-time {
	  font-size: 14px;
	  color: #999;
	  width: 110px;
	  text-align: right;
	}
</style>